<template>
	<view :data-theme="theme" class="container">
		<view class="header">
			<view class="card">
				<h2>申请信息</h2>
				<u--form labelPosition="left" style="margin: 0 20rpx;padding: 20rpx;" :model="formModel" :rules="rules"
					ref="uForm">
					<picker model="selector" @change="bindPickerChange" range-key="depotName" :value="index"
						:range="depotData">
						<u-form-item label="取货仓库" prop="productDetail.name" labelWidth="80" ref="item1"
							:required="true">
							<input v-model="formModel.depotName" disabled placeholder="请选择"
								@click="depotTypeShow = true" border="none"></input>
							<u-icon slot="right" name="arrow-right" @click="depotTypeShow = true"></u-icon>
						</u-form-item>
					</picker>

					<picker model="selector" @change="operatyCityChange" range-key="name" :value="index"
						:range="operateData">
						<u-form-item label="管理城市" prop="productDetail.name" labelWidth="80" ref="item1"
							:required="true">
							<input v-model="formModel.operatyName" disabled placeholder="请选择"
								@click="operatyTypeShow = true" border="none"></input>
							<u-icon slot="right" name="arrow-right" @click="operatyTypeShow = true"></u-icon>
						</u-form-item>
					</picker>

					<!-- <u-form-item label="商品类型" prop="productDetail.skuType" labelWidth="80" ref="item1" :required="true">
						<radio-group style="display: flex;" v-model="formModel.skuType">
							<view style="display: flex;flex-direction: row;margin: 0 20rpx;"
								v-for="(item, index) in radiolist1" :key="index">
								<view>
									<radio :value="item.disabled" :checked="index === current" />
								</view>
								<view style="line-height: 19px;">{{item.name}}</view>
							</view>
						</radio-group>
					</u-form-item> -->
				</u--form>
			</view>
		</view>
		<view class="content" style="border-radius: 10rpx;background-color: #fff;margin: 20rpx;">
			<!-- 这里是可滚动的内容 -->
			<view class="scroll-view" scroll-y style="display: flex;">
				<view class="scroll-view-inner" style="flex: 1;"> <!-- 内容区域 -->
					<h2>申请物资</h2>
					<view class="stockOrder" v-for="(ele,indexO) in addCancelData">
						<view class="businessStock">
							<u--image :showLoading="true" :src="ele.picture" width="80px" height="80px"
								class="top_left"></u--image>
							<view class="top_right" style="padding-left: 20rpx;">
								<view style="margin-bottom: 10rpx;" class="top_right_weight mb_10">
									{{ ele.materialName }}
								</view>
								<view style="margin-bottom: 10rpx;" class="mb_10">物资规格：
									<span>{{ ele.specParam ? ele.specParam : '-' }}</span>
								</view>
								<view style="margin-bottom: 10rpx;" class="mb_10">申请物资数量：
									<span>×{{ ele.count }}<span v-if="ele.skuUnit">({{ele.count}})</span></span>
								</view>
							</view>
							<view style="width: 50px;">
								<button type="primary" @click="deleteAddCancel(indexO)">删除</button>
							</view>
						</view>
						<view style="margin:20rpx;border-bottom: 1px solid #f6f6f6"></view>
					</view>
				</view>
			</view>

			<view style="margin:0 20rpx 20rpx 20rpx;flex: 1;">
				<button :color="bgColor" class="plain_bgColor"
					style="font-weight: bold;border-radius: 10px;color: #FFF;padding: 20rpx;"
					@click="goChooseProduct()">+ 添加申请物资</button>
			</view>
		</view>
		<!-- 底部 -->
		<view class="footer"
			style="position: fixed;bottom: 0px;width: 100%;display: flex;padding: 10px;background-color: #FFF;align-items: center;">
			<view style="flex: 1;">
				<button :color="bgColor" class="bg_color"
					style="font-weight: bold;border-radius: 10px;color: #FFF;padding: 20rpx;"
					@click="goAddProduct()">提交申请</button>
			</view>
		</view>

	</view>
</template>

<script>
	import {
		applyMaterialsAPi,
		returnMaterialsAPi
	} from '@/api/materials.js';
	import {
		queryBusinessOperateCityApi
	} from '@/api/businessStatus.js';
	import {
		businessQueryGoodsAndDepotApi,
		queryDepotInformationApi
	} from '@/api/goodsAndDepot.js';
	import {
		setThemeColor
	} from '@/utils/setTheme';
	let app = getApp();
	export default {
		data() {
			return {
				bgColor: "#ffffff",
				theme: app.globalData.theme,
				formModel: {
					depotName: '',
					// skuType: 1,
					operatyName: '',
				},
				rules: {
					'formModel.depotName': {
						type: 'string',
						required: true,
						message: '请选择取货仓库',
						trigger: ['blur', 'change']
					},
				},
				//---
				depotTypeShow: false, //选择仓库下拉框
				invoiceTypeIndex: [0], //默认选择
				depotForm: {
					limit: 10,
					page: 1,
				}, // 查询仓库名称
				depotData: [], //仓库数据
				index: 0,
				depotId: '', //所选仓库ID
				// ------
				radiolist1: [{
						name: '成品',
						disabled: '1'
					},
					{
						name: '包装物',
						disabled: '2'
					}
				],
				current: 0,
				// --------
				addCancelData: [], //添加的退库商品
				// ------------查询经营城市--------
				operateCityForm: {
					queryType: 0, //0-查询号主自己，1-查询所有,使用1时必须配合父级Id“0“
				},
				operateData: [],
				operateCityId: '',
			};
		},
		onLoad() {
			this.bgColor = setThemeColor();
			uni.setNavigationBarColor({
				frontColor: '#ffffff',
				backgroundColor: this.bgColor,
			});
			this.getDepotList();
			this.getOperateCity();
		},
		methods: {
			// 获取城市 id
			getDepotList() {
				queryDepotInformationApi(this.depotForm).then((res) => {
					let depot = res.data.list
					let depotData = depot.map(obj => {
						const {
							createMemberName,
							depotAddress,
							depotTelephone,
							updatedMemberName,
							zoneId,
							...rest
						} = obj; //删除部分属性
						return rest
					}); //要删除的数据的数组
					// this.depotData.push(depotData);
					this.depotData = depotData
				})
			},
			/* 
			 *获取经营城市信息*/
			getOperateCity() {
				queryBusinessOperateCityApi(this.operateCityForm).then((res) => {
					let newDataList = [];
					// 使用 reduce 方法将所有的 sonVOList 组合成一个新数组
					let allSonVOLists = res.data.reduce((acc, current) => {
						return acc.concat(current.sonVOList);
					}, []);

					this.operateData = allSonVOLists;
				})
			},
			// 仓库名称选择
			// invoiceTypeConfirm(item) {
			// 	let list = item.value[0].depotId;
			// 	this.depotId = list;
			// 	this.depotTypeShow = false;
			// 	this.formModel.depotId = list
			// 	this.formModel.depotName = item.value[0].depotName;
			// },

			// 仓库名称选择
			bindPickerChange: function(e) {
				// console.log('picker发送选择改变，携带值为', e)
				this.index = e.detail.value;
				let i = e.detail.value;
				let depotId = this.depotData[i].depotId;
				if (depotId != this.depotId) {
					this.addCancelData = []; //置空
				};
				this.depotId = depotId;
				this.formModel.depotId = depotId;

				this.formModel.depotName = this.depotData[i].depotName;

			},
			// 事业部名称选择
			operatyCityChange(e) {
				this.index = e.detail.value;
				let i = e.detail.value;
				let useId = this.operateData[i].useId;
				if (useId != this.operateCityId) {
					this.addCancelData = []; //置空
				};
				this.operateCityId = useId;
				this.formModel.operateCityId = useId;
				this.formModel.devisionId = this.operateData[i].parentId;
				this.formModel.operatyName = this.operateData[i].name;
			},

			goChooseProduct() {
				if (this.formModel.depotName == '' || this.formModel.operatyName == '') {
					uni.showToast({
						title: '请先选择仓库和管理城市',
						icon: 'none', // 提示图标，可选值：'success', 'loading', 'none'
						duration: 2000 // 持续时间，单位为毫秒
					});
					return;
				};
				this.goPage(`/pages/materials/chooseSupplies/chooseSupplies?data=${this.depotId}`);
			},
			goPage(url) {
				uni.navigateTo({
					url
				})
			},
			otherFun(items) {
				this.addCancelData.push(...items);
				this.addCancelData = this.addCancelData.map(item => {
					return {
						materialName: item.materialName,
						picture: item.picture,
						specParam: item.specParam,
						cost: item.cost,
						deposit: item.deposit,
						forfeit: item.forfeit,
						weight: item.weight,
						volume: item.volume,
						unit: item.unit,
						count: item.count,
						itemId: item.itemId,
					}
				});
			},
			deleteAddCancel(indexO) {
				this.addCancelData.splice(indexO, 1) //使用splice 方法删除当前对象
			},
			// 提交退库单
			// upAddCancel() {
			// 	delete this.formModel.depotName;
			// 	this.formModel.materialApplyItems = this.addCancelData;
			// 	saveCancelOrderAPi(this.formModel).then((res) => {
			// 		if (res.code == 200) {
			// 			uni.showToast({
			// 				title: '提交成功',
			// 				icon: 'success', // 提示图标，可选值：'success', 'loading', 'none'
			// 				duration: 2000 // 持续时间，单位为毫秒
			// 			});
			// 			setTimeout(() => {
			// 				const pages =
			// 					getCurrentPages(); // 获取当前页面栈的实例，以数组形式按栈的顺序给出，第一个元素为首页，最后一个元素为当前页面。
			// 				const prevPage = pages[pages.length - 2]; // 获取上一级页面对象
			// 				uni.navigateBack({
			// 					delta: 1,
			// 				});
			// 			}, 1000)
			// 		}
			// 	})
			// },
			// 创建申请
			goAddProduct() {
				delete this.formModel.depotName;
				let newAddCancel = [];
				newAddCancel = this.addCancelData.map((item) => {
					return {
						itemId: item.itemId,
						count: item.count,
					}
				});
				this.formModel.materialApplyItems = newAddCancel;
				console.log(this.formModel)
				applyMaterialsAPi(this.formModel).then((res) => {
					uni.showToast({
						title: '提交成功',
						icon: 'success', // 提示图标，可选值：'success', 'loading', 'none'
						duration: 2000 // 持续时间，单位为毫秒
					});
					setTimeout(() => {
						const pages =
							getCurrentPages(); // 获取当前页面栈的实例，以数组形式按栈的顺序给出，第一个元素为首页，最后一个元素为当前页面。
						const prevPage = pages[pages.length - 2]; // 获取上一级页面对象
						uni.navigateBack({
							delta: 1,
						});
					}, 1000)
				});
				// returnMaterialsAPi().then((res) => {
				// 	console.log(res)
				// })
			}
		}
	}
</script>

<style lang="scss">
	page {
		height: 100%;
	}

	.container {
		display: flex;
		flex-direction: column;
		height: 100%;
	}

	.bg_color {
		@include main_bg_color(theme);
	}

	.plain_bgColor {
		@include main_color(theme);
		@include main_bg_rgba_color(theme, 0.05);
		border: 1rpx solid;
	}

	h1 {
		font-weight: bold;
		font-size: 20px;
		margin-bottom: 20px;
	}

	h2 {
		font-weight: bold;
		margin: 20px;
		padding-top: 20rpx;
	}

	.card {
		background-color: #fff;
		border-radius: 10rpx;
		margin: 20rpx;
	}



	.column {
		padding: 20rpx;
		display: flex;
		flex-flow: row;
		text-align: center;
		justify-content: space-between;

		.title {
			display: flex;
			// flex: 1;
			width: 150rpx;
		}

		.title-c {
			display: flex;
			flex: 1;
			justify-content: left;
			// padding-left: 20rpx;
		}
	}

	.businessStock {
		display: flex;
		flex-flow: row;
		padding: 20rpx;

		.top_right {
			margin-left: 20rpx;
		}
	}

	.top_right_weight {
		font-weight: bold;
	}


	.footer {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		background-color: #fff;
		padding: 20rpx 0;
		display: flex;
		justify-content: space-between;
		text-align: center;
		justify-items: center;
	}
</style>